<template>
	<div class="ms-verify-home" @touchmove.prevent>
		<div class="connect-box">
			<div class="phone-box">
				<div class="phone-icon"></div>
				<input type="number" name="" v-model="phone" placeholder="请输入手机号码" class="phone-num-input" value="" />
			</div>
			<div class="password-box">
				<div class="password-icon"></div>
				<input type="number" v-model="psNum" class="password-input" placeholder="请输入验证码" id="" value="" />
				<div class="count-down-box" @click="startCountDown">
					{{countDownText}}
				</div>
			</div>
			<div class="agreement-box">
				<div :class="[msCircle]" @click="clickToggle"></div>
				<p>我已阅读并同意以下协议</p>
			</div>
			<a class="agreement-p xieyi" href="https://m1.cmbc.com.cn/CMBC_MBServer/new/app/mobile-bank/registry/protocol">«中国民生银行电子银行个人客户服务协议»</a>
			<a class="agreement-p xieyi1" @click="openServiceNotice">«中国民生银行民生通行证用户服务须知»</a>
			<div class="login-btn" @click="clickLogin">
				登录
			</div>
			<div class="logo-login"></div>
		</div>
	</div>
</template>

<script>
	import fun from '../util/function'
		export default {
		data() {
			return {
				isShow: true,
				isMSBox: false, 
				times: 60,
				countDownText: '获取验证码',
				timer: '', 
				isClick: true,
				phone: '', 
				psNum: '', //验证码
				msCircle:'ms-circle-blue'
			}
		},
		created() {
		},
		mounted: function() {

		},
		methods: {
			openServiceNotice(){
				  this.$router.push({path:`/${this.$channel}/serviceNotice`,query:{type:1}})
				  //this.$emit('closeMSYHLogin')
			},
			clickToggle(){
			  if(this.msCircle=='ms-circle'){
			  	this.msCircle='ms-circle-blue'
			  }else{
			  	this.msCircle='ms-circle'
			  }
			},
			clickLogin(){//登录
				if(!this.phone){
					fun.toastMessage('请输入手机号码')
					return;
				}
				if(!this.psNum){
					fun.toastMessage('请输入验证码')
					return;
				}
				if(this.msCircle=='ms-circle'){
					fun.toastMessage('请阅读并勾选协议内容')
					return;
				}
				if(!(/^1[3456789]\d{9}$/.test(this.phone))) {
					fun.toastMessage("请填写正确的手机号");
					return;
				}
				this.getSinePost();
			},
			getSinePost(){//签约通行证
				this.$http.post("/cmbc/v1/passport?phone="+this.phone+"&code="+this.psNum, {//application/json
						headers: {
							"Content-Type": "application/x-www-form-urlencoded"
						}
					})
					.then(
						res => {
							//res.data.code='000000'
							if(res.data.code=='000000'){
                                 this.$emit('closeMSYHLogin')
							}else{
								fun.toastMessage(res.data.msg)
							}
						},
						err => {
							console.log(err);
						}
					);
			},
			verificationPhone(){//手机验证码
				this.$http.post("/cmbc/v1/passport/sms?phone="+this.phone, {//application/json
						headers: {
							"Content-Type": "application/x-www-form-urlencoded"
						}
					})
					.then(
						res => {
							if(res.data.code=='000000'){
								console.log('验证码发送成功')
							}else{
								fun.toastMessage(res.data.msg)
							}
						},
						err => {
							console.log(err);
						}
					);
			},
			startCountDown() { //倒计时
				let _this = this
				if(!_this.phone){
					fun.toastMessage('请输入手机号码')
					return;
				}
				if(!(/^1[3456789]\d{9}$/.test(this.phone))) {
					fun.toastMessage("请填写正确的手机号");
					return;
				}
				if(!_this.isClick) {
					return
				}
				_this.verificationPhone()
				_this.isClick = false;
				_this.countDownText = '60s';
				_this.timer = setInterval(function() {
					_this.times--;
					//console.log(_this.times)
					_this.countDownText = _this.times + 's';
					if(_this.times <= 0) {
						_this.isClick = true;
						_this.countDownText = '获取验证码';
						clearInterval(_this.timer);
						_this.times = 60;
					} else {}
				}, 1000)

			}
		},
	
	}
</script>

<style scoped="scoped">
  .connect-box{
		width:630px;
		height:710px;
		background:rgba(255,255,255,1);
		border-radius:15px;
	}

	.login-btn {
		background: #4788ff;
		margin: 0 auto;
		line-height: 82px;
		text-align: center;
		color: white;
		font-size: 32px;
		border-radius: 25px;
		margin-top: 50px;
		font-weight: 500;
		width:498px;
		height:82px;
		background:rgba(71,136,255,1);
		border-radius:20px;
	}
	
	.agreement-p {
		display: block;
		color: #259fbe;
		font-size: 22px;
		margin-left: 62px;
		
	}
	.xieyi{
		margin-top: 34px;
	}
	.xieyi1{
		margin-top: 19px;
	}
	.logo-login{
		width: 420px;
		height: 46px;
		background: url(../assets/images/msyh/msyh-login-logo.png) no-repeat;
		background-size: 420px 46px;
		margin: 51px auto 0;
	}
	.ms-circle {
		width: 38px;
		height: 38px;
		background: url(../assets/images/msyh/ms-1.png) no-repeat;
		background-size: 38px 38px;
		margin-right: 10px;
	}
	.ms-circle-blue {
		width: 38px;
		height: 38px;
		background: url(../assets/images/msyh/ms-2.png) no-repeat;
		background-size: 38px 38px;
		margin-right: 10px;
	}
	.agreement-box {
		width: 500px;
		height: 40px;
		/*background: darkcyan;*/
		margin-left: 55px;
		display: flex;
		align-items: center;
		font-size: 28px;
		color: #ABABAB;
		margin-top: 52px;
	}
	
	.count-down-box {
		width: 185px;
		height: 58px;
		border: 2px solid #5e94cc;
		color: #5e94cc;
		font-size: 28px;
		line-height: 58px;
		text-align: center;
		border-radius: 15px;
		border:2px solid rgba(109,160,219,1);
	}
	
	.phone-icon {
		width: 32px;
		height: 48px;
		background: url(../assets/images/phone-pic.png) no-repeat;
		background-size: 32px 48px;
	}
	
	.password-icon {
		width: 32px;
		height: 38px;
		background: url(../assets/images/password-pic.png) no-repeat;
		background-size: 32px 38px;
	}
	
	.phone-box {
		width: 510px;
		height: 70px;
		/*	background: salmon;*/
		margin: 0 auto;
		/*border-radius: 20px;*/
		border-bottom: 2px solid #d1d1d1;
		margin-top: 78px;
		display: flex;
		align-items: center;
	}
	
	.password-box {
		width: 510px;
		height: 70px;
		margin: 0 auto;
	/*	border-radius: 20px;*/
		border-bottom: 2px solid #d1d1d1;
		/*background: salmon;*/
		display: flex;
		align-items: center;
		margin-top: 35px;
	}
	
	.ms-verify-home {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1300;
		display: flex;
		justify-content: center;
		align-items: center;
		background:rgba(0,0,0,0.6);
		background-size: 100vw 100vh;
		float: left;
	}
	
	.ms-verify-home input {
		width: 400px;
		height: 60px;
		line-height: 40px;
		/*background: pink;*/
	}
	
	.phone-num-input {
		/*border:2px solid darkblue;*/
		background: transparent;
		margin-left: 31px;
	}
	
	.password-input {
		width: 260px !important;
		height: 60px;
		line-height: 40px;
		background: transparent;
		margin-left: 31px;
		/*margin-left: 140px;*/
	}
</style>